<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%response.setHeader("cache-control","public"); %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<!-- 练习信息详情兼,练习入口,错题集分类入口 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/practice/items.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=path%>/static/select/bootstrap-select.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/loading/css/style.css" />
    <style type="text/css">
        .loader {
            margin-top: -200px !important;
            margin-left: -200px !important;
        }
        .popWindow {
            background-color:#9D9D9D;
            width: 100%;
            height: 205%;
            left: 0;
            top: 0;
            filter: alpha(opacity=50);
            opacity: 0.5;
            z-index: 1;
            position: absolute;

        }
        .maskLayer {
            background-color:#000;
            width: 200px;
            height: 30px;
            line-height: 30px;
            left: 50%;
            top: 50%;
            color:#fff;
            z-index: 2;
            position: absolute;
            text-align:center;
        }
    </style>
    <!--[if lt IE 9]>
    <script src="<%=path%>/static/js/html5shiv.js"></script>
    <script src="<%=path%>/static/js/respond.min.js"></script>
    <![endif]-->
    <script src="<%=path%>/static/loading/js/prefixfree.min.js"></script>
    <script src="<%=path%>/static/loading/js/modernizr.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/html5.js"></script>
    <script type="text/javascript" src="<%=path%>/static/js/respond.js"></script>
</head>

<body>
<!--head begin-->
<jsp:include page="../head.jsp" flush="true"/>
<!--head end-->
<div onclick="showDiv()" style="display:block; cursor:pointer;">
</div>
<div id="popWindow" class="popWindow" style="display: none; z-index:999">
</div>
<div class="main-container bgcolor body-box container paddingtop20">
    <div class="middle-bdr container">
        <div class=" middle ">

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 middle-left">

                <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12  middle-left-book ">

                    <div class=" col-md-12 col-xs-12 col-lg-12 col-sm-12 container middle-left-img">

                        <div id="imgdisplaynone" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 ">

                            <select id="selectpickers" class="selectpicker" onchange="queryContent()">
                                <c:forEach items="${depositorylist}" var="depository" varStatus="status">
                                    <option value="${depository.id}">${depository.name}</option>
                                </c:forEach>
                            </select>
                            <img id="img" class="col-md-12 col-xs-12 col-lg-12 col-sm-12"
                                 style="margin-top: 20px;width: 235px;height: 280px;padding-left: 0px;"
                                 src="<%=basePath %>${img}"/>
                        </div>
                        <p class=" col-md-12 col-xs-12 col-lg-12 col-sm-12 middle-left-p0">
                           ${depoName.name}</p>
                        <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12  middle-left-info">

                            <p class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
                                <a class="col-xs-5 col-lg-5 col-sm-5 col-md-5 middle-left-p3 ple">试题数量：</a>
                                <a class="col-xs-7 col-lg-7 col-sm-7 col-md-7 rscol"><span id="content">${countContent}</span> 章/<span id="question">${countQuestion}</span>题 </a>
                            </p>
                            <p class="col-xs-12 col-lg-12 col-sm-12 col-md-12">
                                <a class="col-xs-5 col-lg-5 col-sm-5 col-md-5 middle-left-p2 ple">练习统计：</a>
                                <a class="col-xs-7 col-lg-7 col-sm-7 col-md-7 rscol">
                                    <span class="tbsp">已练</span><span id="countPractice">${countPractice}</span>题/正确<span id="correctCount">${correctCount}</span>题</a>
                            </p>
                        </div>
                    </div>
                </div>

                <a href="item-list.htm">
                    <div class="btn btn-info col-xs-12 col-lg-12 col-sm-12 col-md-12 middle-left-btn for769">
                        选择其他题库..
                    </div>
                </a>
            </div>

            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 middle-right">
                <div class="middle-righttopdiv">
                    <p class="middle-righttopdiv-p">
                        <span class="glyphicon glyphicon-triangle-bottom sptopdiv">顺序练习</span> <span class="sp-ne">（点击下列知识点可打开对应章节的试题进行练习）</span>
                    </p>
                </div>
                <table id="tableContent"></table>
                <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 padding-0 bordertop">
                    <div class="middle-rightbotdiv">
                        <p class="middle-rightbotdiv-p"><span class="glyphicon glyphicon-triangle-bottom sptopdiv">错题练习</span>
                            （本题库所有做错的试题都集中在此处，点击题目类型可针对错题进行练习）</p>
                    </div>
                        <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 middle-right-div1">
                            <a href="javascript:doPost('<%=basePath %>practice/onlinetesting', 1)">
                                <p id="dx" class="col-xs-8 col-lg-9 col-sm-9 col-md-9 middle-right-div1-plt ">
                                    1单选题 </p>
                                <p class="col-xs-4 col-lg-3 col-sm-3 col-md-3 middle-right-div1-prt">${single}
                                    <span class="marleft">></span></p>
                            </a>
                        </div>

                        <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 middle-right-div1">
                            <a href="javascript:doPost('<%=basePath %>practice/onlinetesting', 2)">
                                <p id="pd" class="col-xs-8 col-lg-9 col-sm-9 col-md-9 middle-right-div1-plt ">
                                    2多选题 </p>
                                <p class="col-xs-4 col-lg-3 col-sm-3 col-md-3 middle-right-div1-prt">${judge}
                                    <span class="marleft">></span></p>
                            </a>
                        </div>

                    <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 middle-right-div1">
                        <a href="javascript:doPost('<%=basePath %>practice/onlinetesting', 3)">
                            <p id="dxx" class="col-xs-8 col-lg-9 col-sm-9 col-md-9 middle-right-div1-plt ">
                                3判断题</p>
                            <p class="col-xs-4 col-lg-3 col-sm-3 col-md-3 middle-right-div1-prt">${muti}
                                <span class="marleft">></span></p>
                        </a>
                    </div>
                </div>

                <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12 padding-0 bordertop">
                    <div class="middle-rightbotdiv">
                        <p class="middle-rightbotdiv-p"><span class="glyphicon glyphicon-triangle-bottom sptopdiv">模拟考试</span>
                            （系统会从题库随机抽取20道单选题、10道多选题和20道判断题，难题占比均为20%，即单选中有4道难题，多选中有2道难题，判断题中有4道难题）</p>
                    </div>
                    <div class="content">
                        <div class="table-responsive">
                            <div id="toolbar">
                                <button class="btn btn-default" onclick="gotoExamime()" data-toggle="modal">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    新增模拟考试
                                </button>
                            </div>
                            <table id="taskList_table" class="table-striped table-hover"
                                   data-mobile-responsive="true"></table>
                        </div>
                    </div>
                    <table id="tablePaper"></table>
                    <div class="loader">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-1.9.1.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript" src="<%=path%>/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="<%=path %>/static/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/practice/exam-jump.js"></script>
<script type="text/javascript" src="<%=path%>/static/select/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">
<script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
<script type="text/javascript">
    function showDiv() {
        document.getElementById('popWindow').style.display = 'block';
    }
    function closeDiv() {
        document.getElementById('popWindow').style.display = 'none';
    }

    $(function () {
        //考生 考试中心
        if (${role eq 'master'}) {
           $('#topMain').children().eq(0).addClass('active'); // 追加样式;
           $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
           $('#topMain').children().eq(0).addClass('active'); // 追加样式;
           $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
           $('#topMain').children().eq(0).addClass('active'); // 追加样式;
           $('#topMain').children().eq(0).children().attr('href', '#');
        }
        $('.loader').hide();
    })

    window.operateEventsContent = {
        'click #toPractice': function (e, value, row, index) {
            var myForm = document.createElement("form");
            myForm.method = "post";
            myForm.action = "<%=path %>/practice/practicexercise";
            var myInput = document.createElement("input");
            myInput.setAttribute("name", "id");  // 为input对象设置name
            myInput.setAttribute("value", row.id);  // 为input对象设置value
            myForm.appendChild(myInput);
            document.body.appendChild(myForm);
            myForm.submit();
            document.body.removeChild(myForm);  // 提交后移除创建的form

        }
    };
    function AddFunctionAlty(value, row, index) {
        return [
            '<button id="toPractice",type="button" class="btn btn-default">去练习</button>'
        ].join("")
    }
    window.operateEvents = {
        'click #view': function (e, value, row, index) {
            javascript:doPost('/examsys/practice/paperDetails', row.id);
        }, 'click #continue': function (e, value, row, index) {
            javascript:doPost('/examsys/practice/gotoPractice', row.id);
        }
    };

    $('#tableContent').bootstrapTable({
        "pagination": true,
        "search": true,
        method: 'post',
        dataType: 'json',
        contentType: "application/x-www-form-urlencoded",
        url: '/examsys/practice/contentList',
        striped: true,
        toolbar: "#toolbar",
        showHeader: true,
        pageNumber: 1,
        showRefresh: true,                  //是否显示刷新按钮
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageSize : 5,//单页记录数
        pageList : [5,10,15],//可选择单页记录数
        columns: [{
            field: 'number',
            title: '序号',
            align: "center",
            valign: "middle",
            formatter: function (value, row, index) {
                return index + 1;
            }
        },{
            field: 'title',
            title: '章节名称',
            align: "center",
            valign: "middle"
        },{
            field: 'doneCount',
            title: '已练习的数量',
            align: "center",
            valign: "middle"
        },{
            field: 'count',
            title: '题目总数量',
            align: "center",
            valign: "middle"
        },{
            field: 'Operations',
            title: '操作',
            events: 'operateEventsContent',
            formatter: 'AddFunctionAlty',
            align: "center",
            valign: "middle"
        }]
    });
    function AddFunctionPaper(value, row, index) {
        if (row.score == null || row.score == undefined || row.score == '') {
            return [
                '<button id="continue",type="button" class="btn btn-default">继续考试</button>'
            ].join("")
        } else {
            return [
                '<button id="view",type="button" class="btn btn-default">查看练习情况</button>'
            ].join("")
        }
    }

    $('#tablePaper').bootstrapTable({
        "pagination": true,
        "search": true,
        method: 'post',
        dataType: 'json',
        contentType: "application/x-www-form-urlencoded",
        url: '/examsys/practice/mockList',
        striped: true,
        toolbar: "#toolbar",
        showHeader: true,
        pageNumber: 1,
        showRefresh: true,                  //是否显示刷新按钮
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageSize : 5,//单页记录数
        pageList : [5,10,15],//可选择单页记录数
        columns: [{
            field: 'number',
            title: '序号',
            align: "center",
            valign: "middle",
            formatter: function (value, row, index) {
                return index + 1;
            }
        }, {
            field: 'score',
            title: '所得分数',
            align: "center",
            valign: "middle"
        }, {
            field: 'createtimeStr',
            title: '测试时间',
            align: "center",
            valign: "middle"
        },{
            field: 'Operations',
            title: '操作',
            events: 'operateEvents',
            formatter: 'AddFunctionPaper',
            align: "center",
            valign: "middle"
        }]
    });
    function queryContent(){
        var depositoryid = $("#selectpickers").val();
        $('#tableContent').bootstrapTable('refresh', {
            method : 'get',
            dataType : 'json',
            contentType : "application/x-www-form-urlencoded",
            url: '/examsys/practice/contentList?depositoryid=' + depositoryid ,
            cache : false,
        });
        $.ajax({
            url: '/examsys/practice/queryCount',
            data: {
                depositoryid: depositoryid
            },
            dataType: "json",
            success: function (data) {
               $("#content").html(data.countContent);
               $("#question").html(data.countQuestion);
               $("#countPractice").html(data.countPractice);
               $("#correctCount").html(data.correctCount);
               var str =  '<%=basePath %>' + data.depositoryImg;
                //在这更换图片
                $("#img").attr("src",str);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    }

    function doPost(to, p) {  // to:提交动作（action）,p:参数
        $.ajax({
            url:"<%=path%>/practice/onlinetestingAjax",
            type:"post",
            data:{paperId: p},
            success:function (data) {
                if(data.count!=0){
                    var myForm = document.createElement("form");
                    myForm.method = "post";
                    myForm.action = to;
                    var myInput = document.createElement("input");
                    myInput.setAttribute("name", "paperid");  // 为input对象设置name
                    myInput.setAttribute("value", p);  // 为input对象设置value
                    myForm.appendChild(myInput);
                    document.body.appendChild(myForm);
                    myForm.submit();
                    document.body.removeChild(myForm);  // 提交后移除创建的form
                }else {
                    BootstrapDialog.confirm({
                        title : '提示',
                        message : data.tips,
                        size : BootstrapDialog.SIZE_SMALL,
                        type : BootstrapDialog.TYPE_DEFAULT,
                        closable : true,
                        btnCancelLabel : '取消',
                        btnOKLabel : '确定'
                    });
                }
            }
        })

    }
    function gotoExamime() {
        $('.loader').show();
        showDiv();
        var allTableData = $('#tableContent').bootstrapTable('getData');
        var strs = new Array;

        for (var i = 0; i < allTableData.length; i++) {
            strs.push(allTableData[i].id);
        }
        var ids = strs.join(",");
        $.ajax({
            url: '/examsys/practice/createAnalogPaper',
            data: {
                contentids: ids
            },
            dataType: "json",
            success: function (data) {
                var myForm = document.createElement("form");
                myForm.method = "post";
                myForm.action = '/examsys/practice/gotoPractice';
                var myInput = document.createElement("input");
                myInput.setAttribute("name", "paperid");  // 为input对象设置name
                myInput.setAttribute("value", data[0].paperid);  // 为input对象设置value
                myForm.appendChild(myInput);
                document.body.appendChild(myForm);
                myForm.submit();
                document.body.removeChild(myForm);  // 提交后移除创建的form
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
}
</script>

</body>

</html>